<template>
  <div class="header">
    <div class="navbar">
      <div
        v-for="(item, index) in navList"
        :key="item.path"
        :class="{ shadow: item.path == route.meta.super }"
        @click="changeNav(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="childNav">
      {{ userInfo.type == 1 ? "管理员" : "会员"
      }}{{ userInfo.username }}您好，今天是{{nowTime}}，欢迎回到个人中心。
    </div>
    <div class="position">您现在的位置：<span>易买网</span> &gt; 个人中心</div>
  </div>
  <el-container class="content">
    <!--侧边栏区域-->
    <el-aside
      width="180px"
      style="background-color: rgb(238, 241, 246)"
      id="aside"
    >
      <el-menu
        unique-opened
        size="samll"
        :default-openeds="['1']"
        router
        :default-active="route.path"
      >
        <el-sub-menu
          v-for="item in menuList"
          :key="item.index"
          :index="item.index"
        >
          <template #title>
            <el-icon><Menu /></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="item1 in item.children"
            :key="item1.path"
            :index="item1.path"
            :route="item1.path"
            ><el-icon><Help /></el-icon>{{ item1.name }}</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!--主区域-->
    <el-container>
      <el-main>
        <p class="contitle">
          <span>{{ route.meta.title }}</span>
        </p>
        <div style="padding: 20px;">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import today from "@/utils/toDay";

const nowTime=today;
const store = useStore();
const router = useRouter();
const route = useRoute();
const userInfo = computed(() => {
  return store.getters.getUserInfo;
});

const navList = ref<any[]>([]);
const menuList = ref<any[]>([]);

onMounted(() => {
  getNav();
  
});
function getNav(){
  if (userInfo.value.type == 1) {
    navList.value = [
      { name: "首页", path: "/backHome" },
      { name: "用户", path: "/backUser" },
      { name: "商品", path: "/backGoods" },
      { name: "订单", path: "/backOrder" },
      { name: "留言", path: "/backComment" },
      { name: "新闻", path: "/backNews" },
      { name: "公告", path: "/backNotice" },
    ];
    menuList.value = [
      {
        name: "用户管理",
        index: "1",
        children: [{ name: "用户管理", path: "/backUser", index: "1-1" }],
      },
      {
        name: "商品信息",
        index: "2",
        children: [
          { name: "分类管理", path: "/backClassify", index: "2-1" },
          { name: "商品管理", path: "/backGoods", index: "2-2" },
        ],
      },
      {
        name: "订单管理",
        index: "3",
        children: [{ name: "订单管理", path: "/backOrder", index: "3-1" }],
      },
      {
        name: "留言管理",
        index: "4",
        children: [{ name: "留言管理", path: "/backComment", index: "4-1" }],
      },
      {
        name: "新闻管理",
        index: "5",
        children: [{ name: "新闻管理", path: "/backNews", index: "5-1" }],
      },
      {
        name: "公告管理",
        index: "6",
        children: [{ name: "公告管理", path: "/backNotice", index: "6-1" }],
      },
    ];
  } else {
    navList.value = [
      { name: "首页", path: "/backHome" },
      { name: "用户", path: "/info" },
      { name: "订单", path: "/backOrder" },
      { name: "留言", path: "/backComment" },
    ];
    menuList.value = [
      {
        name: "个人资料",
        index: "1",
        children: [
          { name: "修改资料", path: "/info" },
          { name: "修改密码", path: "/pwd" },
          { name: "地址管理", path: "/address" },
        ],
      },
      {
        name: "订单管理",
        index: "2",
        children: [{ name: "订单管理", path: "/backOrder" }],
      },
      {
        name: "留言管理",
        index: "3",
        children: [{ name: "留言管理", path: "/backComment" }],
      },
    ];
  }
}
function changeNav(index: number) {
  router.push({
    path: navList.value[index].path,
  });
}
</script>

<style lang="less" scoped>
.navbar {
  height: 30px;
  margin-left: 100px;
  div {
    cursor: pointer;
    float: left;
    width: 78px;
    height: 30px;
    background: url(../../assets/img/bg.png) right -30px no-repeat;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #105f4b;
  }
  .shadow {
    background-position: left top;
    color: #fff;
  }
}
.position {
  margin: 10px 0;
  span {
    color: blue;
    cursor: pointer;
  }
}
.content {
  height: calc(100% - 100px);
}
.box {
  dl {
    dt {
      color: #404040;
      font-weight: bold;
      background: #fafafa;
      padding: 2px 10px;
      height: 22px;
      line-height: 22px;
    }
    dd {
      height: 22px;
      line-height: 22px;
      margin: 5px auto;
      margin-left: 10px;

      background: url(../../assets/img/bg.png) -232px -81px no-repeat;
      padding-left: 25px;
      span {
        color: #666;
        display: block;
        cursor: pointer;
        width: 60px;
      }
    }
  }
  em {
    float: right;
    padding: 0 5px;
    font-style: normal;
    > span {
      text-align: right;
    }
  }
}
:deep(.el-main) {
  padding: 0;
  overflow: hidden;
}
.contitle {
  font-size: 14px;
  line-height: 30px;
  background: url(../../assets/img/bg.png) -230px -100px no-repeat;
  border-bottom: 2px solid #fbaa62;
  padding-left: 25px;
  font-weight: bold;
}
.childNav {
  height: 30px;
  background: #fc7e31;
  line-height: 30px;
  text-align: right;
  color: #ffc;
}
</style>
